<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>练习 - 网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 50px auto 0;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }

    .hh {
      background-image: url(./images/hour.png);
      transform: rotate(270deg);
    }

    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(./images/second.png);
      transform: rotate(0deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <script>
    /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */
    let h = new Date().getHours()
    let m = new Date().getMinutes()
    let s = new Date().getSeconds()
    const hh = document.querySelector('.hh')
    const mm = document.querySelector('.mm')
    const ss = document.querySelector('.ss')
    // console.log(`${h}:${m}:${s}`)
    hh.style.transform = (`rotate(${h % 12 / 12 * 360}deg)`)
    mm.style.transform = (`rotate(${m / 60 * 360}deg)`)
    ss.style.transform = (`rotate(${s / 60 * 360}deg)`)
    let i = 0

    let sss = setInterval(function () {
      s = new Date().getSeconds()
      ss.style.transform = (`rotate(${s / 60 * 360}deg)`)
      if (s === 0) {
        m = new Date().getMinutes()
        mm.style.transform = (`rotate(${m / 60 * 360}deg)`)
      }
      if (m === 0) {
        h = new Date().getHours()
        hh.style.transform = (`rotate(${h % 12 / 12 * 360}deg)`)
      }



      // i++
      // i = i % 60
      // ss.style.transform = (`rotate(${i * 6}deg)`)
      // if (i === 0) {
      //   m++
      //   mm.style.transform = (`rotate(${m / 60 * 360}deg)`)
      //   if (m > 0 && m % 60 === 0) {
      //     m = m % 60
      //     h++
      //     h = h % 12
      //   }
      // }
    }, 1000)

  </script>
</body>

</html>